<template>
    <div id="map" style="width: 100%; height: 100%"></div>
</template>

<script setup>
    import { ref, onMounted, onBeforeUnmount } from 'vue'
    import * as echarts from 'echarts'
    import mapJson from './mapJson'
    const chartInstance = ref(null)

    const dataSource = ref({
        china: [
            {
                name: '北京市',
                value: 80,
                itemStyle: {
                    color: '#3875ff'
                }
            },
            { name: '上海市', value: 60 },
            { name: '广东省', value: 100 },
            { name: '浙江省', value: 75 },
            { name: '江苏省', value: 90 }
        ],
        provinces: {
            '北京市': [
                { name: '朝阳区', value: 30 },
                { name: '海淀区', value: 25 },
                { name: '东城区', value: 15 },
                { name: '西城区', value: 10 }
            ],
            '上海市': [
                { name: '浦东新区', value: 40 },
                { name: '徐汇区', value: 20 },
                { name: '黄浦区', value: 15 },
                { name: '静安区', value: 10 }
            ],
            '广东省': [
                { name: '广州市', value: 50 },
                { name: '深圳市', value: 30 },
                { name: '东莞市', value: 10 },
                { name: '佛山市', value: 10 }
            ],
            '浙江省': [
                { name: '杭州市', value: 40 },
                { name: '宁波市', value: 20 },
                { name: '温州市', value: 10 },
                { name: '绍兴市', value: 5 }
            ],
            '江苏省': [
                { name: '南京市', value: 40 },
                { name: '苏州市', value: 30 },
                { name: '无锡市', value: 10 },
                { name: '常州市', value: 10 }
            ]
        },
        cities: {
            '广州市': [
                { name: '天河区', value: 20 },
                { name: '越秀区', value: 15 },
                { name: '荔湾区', value: 10 },
                { name: '海珠区', value: 5 }
            ],
            '深圳市': [
                { name: '南山区', value: 15 },
                { name: '福田区', value: 10 },
                { name: '罗湖区', value: 5 }
            ],
            '杭州市': [
                { name: '西湖区', value: 15 },
                { name: '拱墅区', value: 10 },
                { name: '江干区', value: 10 },
                { name: '滨江区', value: 5 }
            ],
            '南京市': [
                { name: '玄武区', value: 10 },
                { name: '秦淮区', value: 10 },
                { name: '鼓楼区', value: 10 },
                { name: '建邺区', value: 10 }
            ]
        }
    })

    onMounted(() => {
        // 初始化 ECharts 实例
        chartInstance.value = echarts.init(document.getElementById('map'))

        // 加载全国地图数据
        loadChinaMap()
    })

    // 使用 axios 获取全国地图和项目数据
    function loadChinaMap() {
        const chinaGeoJson = mapJson

        echarts.registerMap('china', chinaGeoJson)

        // 使用 axios 获取项目数据
        const projectData = dataSource.value.china

        const option = {
            title: {
                text: '公司项目分布地图',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params) {
                    const value = params.value || 0 // 如果没有数据，显示0
                    return `${params.name}: ${value} 项目`
                }
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color: ['#FF8A73']
                },
                show: false // 确保visualMap被展示
            },
            series: [
                {
                    name: '省份',
                    type: 'map',
                    map: 'china',
                    roam: true,
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'inside'
                    },
                    itemStyle: {
                        normal: {
                            areaColor: '#f3f3f3', // 没有数据的区域颜色
                            borderColor: '#111'
                        },
                        emphasis: {
                            areaColor: '#f5b041', // 鼠标悬浮时高亮的颜色
                            shadowBlur: 10,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },
                    data: projectData
                }
            ]
        }

        chartInstance.value.setOption(option)

        // 绑定地图点击事件
        chartInstance.value.on('click', params => {
            if (params.name) {
                loadProvinceMap(params.name)
            }
        })
    }

    // 使用 axios 获取省级地图和项目数据
    function loadProvinceMap(provinceName) {
        const provinceGeoJson = mapJson.features.find(item => item.properties.name == provinceName) // 省份对应的地图数据
        console.log(provinceGeoJson, 'provinceGeoJson')
        const projectData = dataSource.value.provinces[provinceName]
        echarts.registerMap(provinceName, provinceGeoJson)

        const provinceOption = {
            title: {
                text: `${provinceName} 项目分布`,
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            visualMap: {
                min: 0,
                max: 100,
                left: 'left',
                top: 'bottom',
                text: ['高', '低'],
                calculable: true,
                inRange: {
                    color: ['#e0ffff', '#006edd']
                }
            },
            series: [
                {
                    name: '市级',
                    type: 'map',
                    map: provinceName,
                    roam: true,
                    label: {
                        show: true,
                        formatter: '{b}',
                        position: 'inside'
                    },
                    data: projectData
                }
            ]
        }

        chartInstance.value.setOption(provinceOption)

        // 在省级视图上再绑定点击事件，实现市级下钻
        chartInstance.value.on('click', params => {
            // TODO: 实现市级下钻
        })
    }

    onBeforeUnmount(() => {
        if (chartInstance.value) {
            chartInstance.value.dispose()
        }
    })
</script>
